<template>
    <section class="caption-text-style">
        <el-form label-position="top" label-width="80px" :model="datas" size="small">
            <el-form-item :label="$t('drag.123456-68')">
                <el-input v-model="datas.setStyle.name" :placeholder="$t('drag.123456-69')" show-word-limit />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-70')">
                <el-input type="textarea" v-model="datas.setStyle.description" :placeholder="$t('drag.123456-71')" maxlength="100" />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-72')">
                <div class="weiz">
                    <i :class="datas.setStyle.positions === 'left' ? 'active' : ''" class="iconfont icon-horizontal-left" @click="datas.setStyle.positions = 'left'" />
                    <i :class="datas.setStyle.positions === 'center' ? 'active' : ''" class="iconfont icon-juzhong" @click="datas.setStyle.positions = 'center'" />
                    <i :class="datas.setStyle.positions === 'right' ? 'active' : ''" class="iconfont icon-juyou" @click="datas.setStyle.positions = 'right'" />
                </div>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-73')" prop="wordSize" class="left">
                <el-input type="number" v-model.number="datas.setStyle.wordSize" :placeholder="$t('drag.123456-74')" :maxlength="2" />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-75')" prop="descriptionSize" class="left">
                <el-input type="number" v-model.number="datas.setStyle.descriptionSize" :placeholder="$t('drag.123456-76')" />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-77')" prop="wordWeight" class="left">
                <el-input type="number" v-model.number="datas.setStyle.wordWeight" :placeholder="$t('drag.123456-78')" />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-79')" prop="descriptionWeight" class="left">
                <el-input type="number" v-model.number="datas.setStyle.descriptionWeight" :placeholder="$t('drag.123456-80')" />
            </el-form-item>
            <el-form-item :label="$t('drag.123456-81')" class="left-height">
                <el-slider v-model="datas.setStyle.wordHeight" :max="100" :min="20" input-size="mini" show-input></el-slider>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-25')" class="left-height">
                <el-slider v-model="datas.setStyle.marginTop" :max="300" :min="-16" input-size="mini" show-input></el-slider>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-26')" class="left-height">
                <el-slider v-model="datas.setStyle.marginBottom" :max="300" :min="-16" input-size="mini" show-input></el-slider>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-82')" class="between">
                <el-color-picker v-model="datas.setStyle.wordColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-83')" class="between">
                <el-color-picker v-model="datas.setStyle.descriptionColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <el-form-item :label="$t('drag.123456-16')" class="between">
                <el-color-picker v-model="datas.setStyle.backColor" show-alpha class="picke" :predefine="predefineColors"></el-color-picker>
            </el-form-item>
            <!-- <el-form-item label="底部分割线" class="between">
                {{ datas.setStyle.borderBott ? '显示' : '隐藏' }}
                <el-checkbox v-model="datas.setStyle.borderBott" />
            </el-form-item>
            <el-form-item label="查看更多" class="between">
                {{ datas.setStyle.more.show ? '显示' : '隐藏' }}
                <el-checkbox v-model="datas.setStyle.more.show" />
            </el-form-item> -->
            <!-- 更多样式选择 -->
        </el-form>
    </section>
</template>

<script>
export default {
    name: 'captionTextStyle',
    props: {
        datas: Object,
    },
    data() {
        return {
            predefineColors: [
                // 颜色选择器预设
                '#ff4500',
                '#ff8c00',
                '#ffd700',
                '#90ee90',
                '#00ced1',
                '#1e90ff',
                '#c71585',
                '#409EFF',
                '#909399',
                '#C0C4CC',
                'rgba(255, 69, 0, 0.68)',
                'rgb(255, 120, 0)',
                'hsv(51, 100, 98)',
                'hsva(120, 40, 94, 0.5)',
                'hsl(181, 100%, 37%)',
                'hsla(209, 100%, 56%, 0.73)',
                '#c7158577',
            ],
        };
    },
    methods: {},
};
</script>

<style lang="scss" scoped>
.caption-text-style {
    width: 100%;
    padding: 20px 5px;
    box-sizing: border-box;

    .weiz {
        i {
            padding: 5px 14px;
            margin-right: 10px;
            border-radius: 0;
            border: 1px solid #ebedf0;
            font-size: 20px;
            font-weight: 500;
            cursor: pointer;

            &:last-child {
                font-size: 22px;
            }

            &.active {
                color: #155bd4;
                border: 1px solid #155bd4;
                background: #e0edff;
            }
        }
    }

    .left {
        ::v-deep .el-form-item__label {
            text-align: left;
            width: 80px;
            float: left;
            padding: 0;
        }

        ::v-deep .el-form-item__content {
            margin-left: 80px;
        }
    }

    .left-height {
        ::v-deep .el-form-item__label {
            text-align: left;
            width: 80px;
            float: left;
            padding: 0;
            line-height: 38px;
        }

        ::v-deep .el-form-item__content {
            margin-left: 80px;
        }
    }

    .between {
        ::v-deep .el-form-item__label {
            text-align: left;
        }
        ::v-deep .el-form-item__content {
            text-align: right;
            float: right;
        }
    }
}
</style>
